<!--推荐广告房产-->
<template>
    <div>
        <b-carousel
                id="carousel"
                v-model="slide"
                :interval="4000"
                controls
                indicators
                img-width="1024"
                img-height="480"
                style="text-shadow: 1px 1px 2px #3F3F3F;"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd">
            <b-carousel-slide v-for="data in dataList" :key="data.id" :img-src="data.pictureUrl">
                <div class="hero-item">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="hero-property-content text-center">
                                    <h1 class="title"><a :href="jumpUrl">{{data.title}}</a></h1>
                                    <span class="location"><img src="/images/icons/hero-marker.png" alt="">{{data.address}}</span>
                                    <div class="type-wrap">
                                        <span class="type" v-show="data.rentType===1">出租</span>
                                        <span class="type" v-show="data.rentType===2">出售</span>
                                        <span class="price">￥{{data.price}}<span v-if="data.rentType===1">{{leaseTypeVal[data.leaseType]}}</span></span>
                                    </div>
                                    <ul class="property-feature">
                                        <li>
                                            <img src="/images/icons/hero-area.png" alt=""><span>{{data.square}}平米</span>
                                        </li>
                                        <li>
                                            <img src="/images/icons/hero-bed.png" alt=""><span>{{data.roomNumber}}</span>
                                        </li>
                                        <li>
                                            <img src="/images/icons/hero-bath.png" alt=""><span>{{data.bathroomNumber}}</span>
                                        </li>
                                        <li>
                                            <img src="/images/icons/hero-parking.png" alt=""><span>{{data.garageNumber}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </b-carousel-slide>
        </b-carousel>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                slide: 0,
                sliding: null,
                jumpUrl: '#',
                leaseTypeVal: ['', '天', '周', '月', '季', '年']
            }
        },
        props: {
            dataList: {
                type: Array,
                default() {
                    return [
                        {
                            id: 1,
                            pictureUrl: '/images/hero/hero-1.jpg',
                            square: 550,
                            roomNumber: 3,
                            bathroomNumber: 3,
                            garageNumber: 3,
                            title: '江南宅院',
                            price: 550,
                            leaseType: 1,
                            address: '锦江区东大街下东大街568号',
                            rentType: 1
                        },
                        {
                            id: 2,
                            pictureUrl: '/images/hero/hero-2.jpg',
                            square: 550,
                            roomNumber: 3,
                            bathroomNumber: 3,
                            garageNumber: 3,
                            title: '木马山别墅',
                            price: 2550,
                            leaseType: 1,
                            address: '城北大道450附22号',
                            rentType: 2
                        },
                        {
                            id: 3,
                            pictureUrl: '/images/hero/hero-3.jpg',
                            square: 550,
                            roomNumber: 3,
                            bathroomNumber: 3,
                            garageNumber: 3,
                            title: '皇家一号公寓',
                            price: 550,
                            leaseType: 1,
                            address: '锦江区福字街215号',
                            rentType: 1
                        }
                    ]
                }
            }
        },
        methods: {
            onSlideStart() {
                this.sliding = true
            },
            onSlideEnd() {
                this.sliding = false
            }
        }
    }
</script>

<style scoped>
    .hero-item {
        height: 100vh;
    }
</style>

<style>
    .carousel-caption {
        right: 0;
        left: 0;
        width: 100%;
    }
</style>
